<template>
  <div>
    <!-- 头部组件 -->
    <NavBar leftText="返回"></NavBar>
    <div class="news_wrap">
      <div class="news_title_wrap">
        <div class="news_title">
          <h3>{{detail.title}}</h3>
        </div>
        <div class="news_time">
          <p>发表时间:{{ detail.add_time | dateFormat }}</p>
          <p>点击次数:{{detail.click}}</p>
        </div>
      </div>
      <div class="news_content_wrap" v-html="detail.content"></div>
      <!-- 评论框组件 -->
      <Comments :id="getId"></Comments>
      <!-- 底部tab栏  -->
      <TabBar></TabBar>
    </div>
  </div>
</template>

<script>
// 引入评论组件
import Comments from "../components/Comment";
import NavBar from "../components/navBar";
import TabBar from '../components/Tabbar'
export default {
  components: {
    Comments,
    NavBar,
    TabBar
  },
  data() {
    return {
      // 新闻详情对象
      detail: {}
    };
  },
  created() {
    this.getNewDetail();
  },
  methods: {
    // 获取图文详情数据
    async getNewDetail() {
      const { data: res } = await this.$http.get(`/api/getnew/${this.getId}`);
      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取图文数据失败，请联系管理员");
      }
      this.detail = res.message[0];
    }
  },
  computed: {
    getId() {
      // 获取id
      const id = this.$route.params.id;
      return id;
    }
  }
};
</script>

<style lang="less" scoped>
.news_wrap {
  padding: 0px 10px;
  .news_title_wrap {
    border-bottom: 1px solid #ccc;
    .news_title {
      color: #1989fa;
      text-align: center;
      font-size: 13px;
    }
    .news_time {
      display: flex;
      justify-content: space-between;
      p {
        font-size: 13px;
        color: #1989fa;
      }
    }
  }
}
</style>